<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,uer-scalable=no">
	<script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../chat/css/chat.css" />
	<title>跟雪花妹聊天</title>
</head>
<body>



<div id="main_frame" class="main">
	<div id="talk_record" class="talk_record">
		<!-- <div class="talk_recordboxme">
			<div class="user"><img src="../chat/images/thumbs/15.jpg"/></div>
			<div class="talk_recordtextbg">&nbsp;</div>
			<div class="talk_recordtext">
				<h3>我的问题是：1+1=？</h3>
			</div>
		</div>
		<div class="talk_recordbox">
			<div class="user"><img src="../chat/images/thumbs/11.jpg"/></div>
			<div class="talk_recordtextbg">&nbsp;</div>
			<div class="talk_recordtext">
				<h3>对方的回答是：1+1=2</h3>
			</div>
		</div>
		<div class="talk_recordboxme">
			<div class="user"><img src="../chat/images/thumbs/15.jpg"/></div>
			<div class="talk_recordtextbg">&nbsp;</div>
			<div class="talk_recordtext">
				<h3>我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？我的问题是：1+1=？</h3>
			</div>
		</div>
		<div class="talk_recordbox">
			<div class="user"><img src="../chat/images/thumbs/11.jpg"/></div>
			<div class="talk_recordtextbg">&nbsp;</div>
			<div class="talk_recordtext">
				<h3>对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2</h3>
			</div>
		</div>
		<div class="talk_recordbox">
			<div class="user"><img src="../chat/images/thumbs/11.jpg"/></div>
			<div class="talk_recordtextbg">&nbsp;</div>
			<div class="talk_recordtext">
				<h3>对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2对方的回答是：1+1=2</h3>
			</div>
		</div>-->
	</div>
</div>
<span id="msg_end" style="overflow:hidden"></span>
<div class="foot">
	<div class="foot_right"><input class="talk_send" type="button" title="发送" value="发送" onclick="sendMsg()" /></div>
	<div class="foot_left"><input id="input_msg" class="messages" autocomplete="off" value="在这里输入文字" onFocus="if(this.value=='在这里输入文字'){this.value='';}"  onblur="if(this.value==''){this.value='在这里输入文字';}"  /></div>
</div>

<script type="text/javascript">


$(document).ready(function(){
	initChat(); 
});

function initChat() {
	
	$.ajax({
		type:"POST",
		url: "./mm_chat_init",
		dataType: "json",
		async: true,
		success: function(data) {
			if (data.respChat.result == "success") {
				
				addTalkRecordBox(data);
		
				
			} else {
				alert("抱歉，我们遇到一点问题，请稍后再试。");
			}
		},
		error: function(err) {
			alert("抱歉，我们遇到一点问题，请稍后再试。");
		}
	});
}

function sendMsg() {
	
	var msg = $("#input_msg").val();
	addTalkRecordBoxMe(msg);
	$("#input_msg").val("");
	//$("#main_frame").scrollTop = $("#main_frame").scrollHeight;
	//$("#msg_end").scrollIntoView(false);
	
	$.ajax({
		type:"POST",
		url: "./mm_chat_send",
		dataType: "json",
		data: { message: msg },
		async: true,
		success: function(data) {
			if (data.respChat.result == "success") {
				
				addTalkRecordBox(data);
				//$("#msg_end").scrollIntoView(false);
				
			} else {
				alert("抱歉，我们遇到一点问题，请稍后再试。");
			}
		},
		error: function(err) {
			alert("抱歉，我们遇到一点问题，请稍后再试。");
		}
	});
	
}

function addTalkRecordBox(data) {
	
	var response = data.respChat.response;
	var nickname = data.respChat.virtualMM.nickname;
	var headimg = data.respChat.virtualMM.headimgurl64;
	
	
	var boxsrc = '<div class="talk_recordbox">';
	boxsrc += '<div class="user"><img src="' + headimg + '"/></div>';
	boxsrc += '<div class="talk_recordtextbg">&nbsp;</div>';
	boxsrc += '<div class="talk_recordtext"><h3>' + response + '</h3></div>';
	boxsrc += '</div>';
	
	$("#talk_record").append(boxsrc);
}

function addTalkRecordBoxMe(message) {
	
	var nickname = "<s:property value='visitor.nickname' />";
	var headimg = "<s:property value='visitor.headimgurl64' />";
	
	var boxsrc = '<div class="talk_recordboxme">';
	boxsrc += '<div class="user"><img src="'+headimg+'"/></div>';
	boxsrc += '<div class="talk_recordtextbg">&nbsp;</div>';
	boxsrc += '<div class="talk_recordtext">';
	boxsrc += '<h3>'+message+'</h3>';
	boxsrc += '</div>';
	
	$("#talk_record").append(boxsrc);
}

</script>

</body>
</html>